{% extends 'base_detail_list.html' %}
{% load static %}
{% block title %}天天生鲜-商品详情{% endblock title %}

{% block main_content %}

<div class="breadcrumb">
    <a href="#">全部分类</a>
    <span>></span>
    <a href="#">{{ sku.type.name }}</a>
    <span>></span>
    <a href="#">商品详情</a>
</div>

<div class="goods_detail_con clearfix">
    <div class="goods_detail_pic fl"><img src="{{ sku.image.url }}"></div>

    <div class="goods_detail_list fr">
        <h3>{{ sku.name }}</h3>
        <p>{{ sku.desc }}</p>
        <div class="prize_bar">
            <span class="show_pirze">¥<em>{{ sku.price }}</em></span>
            <span class="show_unit">单  位：{{ sku.unite }} </span>
        </div>
        <div class="goods_num clearfix">
            <div class="num_name fl">数 量：</div>
            <div class="num_add fl">
                <input type="text" class="num_show fl" value="1">
                <a href="javascript:;" class="add fr">+</a>
                <a href="javascript:;" class="minus fr">-</a>
            </div>
        </div>
        <div>
            <p>其他规格:</p>
            <ul>
                {% for sku in same_spu_skus %}
                <li><a href="{% url 'goods:detail' sku.id %}">{{ sku.name }}</a></li>
                {% endfor %}
            </ul>
        </div>
        <div class="total">总价：<em>16.80元</em></div>
        <div class="operate_btn">
             {% csrf_token %}
            <a href="javascript:;" class="buy_btn">立即购买</a>
            <a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>
        </div>
    </div>
</div>

<div class="main_wrap clearfix">
    <div class="l_wrap fl clearfix">
        <div class="new_goods">
            <h3>新品推荐</h3>
            <ul>
                {% for sku in new_skus %}
                <li>
                    <a href="{% url 'goods:detail' sku.id %}"><img src="{{ sku.image.url }}"></a>
                    <h4><a href="{% url 'goods:detail' sku.id %}">{{ sku.name }}</a></h4>
                    <div class="prize">￥{{ sku.price }}</div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="r_wrap fr clearfix">
        <ul class="detail_tab clearfix">
            <li class="active">商品介绍</li>
            <li>评论</li>
        </ul>

        <div class="tab_content">
            <dl>
                <dt>商品详情：</dt>
                <dd>{{ sku.goods.detail|safe }}</dd>
            </dl>
        </div>

        <div class="tab_content">
            <dl>
                {% for order in sku_orders %}
                <dt>评论时间：{{ order.update_time }}&nbsp;&nbsp;用户名:{{ order.order.user.username }}</dt>
                <dd>评论内容:{{ order.comment }}</dd>
                {% endfor %}
            </dl>
        </div>
    </div>
</div>
{% endblock main_content %}

{%block bottom %}
<div class="add_jump"></div>
{%endblock%}

{% block bottomfiles %}
<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js'%}"></script>
<script type="text/javascript">
    update_goods_amount()

    // 计算商品的总价格
    function update_goods_amount() {
        let price = $('.show_pirze').children('em').text();
        let count = $('.num_show').val()
        // 计算商品的总价
        price = parseFloat(price)
        count = parseInt(count)
        const amount = price * count;
        // 设置商品的总价
        $('.total').children('em').text(amount.toFixed(2) + '元')
    }

    // 增加商品的数量
    $('.add').click(function () {
        // 获取商品原有的数目
        let count = $('.num_show').val();
        // 加1
        count = parseInt(count) + 1
        // 重新设置商品的数目
        $('.num_show').val(count)
        // 更新商品的总价
        update_goods_amount()
    })

    // 减少商品的数量
    $('.minus').click(function () {
        // 获取商品原有的数目
        let count = $('.num_show').val();
        // 减1
        count = parseInt(count) - 1;
        if (count <= 0) {
            count = 1
        }
        // 重新设置商品的数目
        $('.num_show').val(count)
        // 更新商品的总价
        update_goods_amount()
    })

    // 手动输入商品的数量
    $('.num_show').blur(function () {
        // 获取用户输入的数目
        var count = $(this).val()
        // 校验count是否合法
        if (isNaN(count) || count.trim().length == 0 || parseInt(count) <= 0) {
            count = 1
        }
        // 重新设置商品的数目
        $(this).val(parseInt(count))
        // 更新商品的总价
        update_goods_amount()
    })
    // 获取add_cart div元素左上角的坐标
    const $add_x = $('#add_cart').offset().top;
    const $add_y = $('#add_cart').offset().left;
    // 获取show_count div元素左上角的坐标
    const $to_x = $('#show_count').offset().top;
    const $to_y = $('#show_count').offset().left;

    // $(".add_jump").css({'left': $add_y + 80, 'top': $add_x + 10, 'display': 'block'})
    // $('#add_cart').click(function () {
    //     $(".add_jump").stop().animate({
    //             'left': $to_y + 7,
    //             'top': $to_x + 7
    //         },
    //         "fast", function () {
    //             $(".add_jump").fadeOut('fast', function () {
    //                 $('#show_count').html(2);
    //             });
    //
    //         });
    // })

    $('#add_cart').click(function () {
        // 获取商品id和商品数量
        sku_id = $(this).attr('sku_id') // attr prop
        count = $('.num_show').val()
        csrf = $('input[name="csrfmiddlewaretoken"]').val()
        // 组织参数
        params = {'sku_id': sku_id, 'count': count, 'csrfmiddlewaretoken': csrf}
        // 发起ajax post请求，访问/cart/add, 传递参数:sku_id count
        $.post('/cart/add', params, function (data) {
            if (data.res == 5) {
                // 添加成功
                $(".add_jump").css({'left': $add_y + 80, 'top': $add_x + 10, 'display': 'block'})
                $(".add_jump").stop().animate({
                        'left': $to_y + 7,
                        'top': $to_x + 7
                    },
                    "fast", function () {
                        $(".add_jump").fadeOut('fast', function () {
                            // 重新设置用户购物车中商品的条目数
                            $('#show_count').html(data.total_count);
                        });
                    });
            } else {
                // 添加失败
                alert(data.errmsg)
            }
        })
    })
</script>
{% endblock bottomfiles %}
